// PublishTaskModal.tsx
import React, {useState} from 'react';
import {Modal, Form, Input, Select, Button} from 'antd';
import {FormInstance} from 'antd/lib/form';
import SelectRegion from '../pages/SelectRegion';
import ReactQuill from 'react-quill'; // 导入 react-quill 组件
import 'react-quill/dist/quill.snow.css'; // 导入 quill 的样式

const {Option} = Select;

interface PublishTaskModalProps {
    isVisible: boolean;
    onOk: (values: Record<string, any>) => void;
    onCancel: () => void;
}

const PublishTaskModal: React.FC<PublishTaskModalProps> = ({isVisible, onOk, onCancel}) => {
    const [form] = Form.useForm<FormInstance>();
    const [isPreview, setIsPreview] = useState(false);

    const handleOk = () => {
        form.validateFields()
            .then(values => {
                console.log('Received values: ', values);
                onOk(values);
                form.resetFields();
            })
            .catch(info => {
                console.log('Validate Failed:', info);
            });
    };

    return (
        <Modal
            visible={isVisible}
            onOk={handleOk}
            width={"880px"}
            onCancel={() => {
                onCancel();
                form.resetFields();
            }}
        >
            <Form form={form} layout="vertical" name="taskForm">
                <div>
                    <Form.Item
                        name="title"
                        label="Task Title"
                        rules={[{required: true, message: 'Please enter the task title'}]}
                    >
                        <Input style={{height: '32px'}}/>
                    </Form.Item>
                    <Form.Item
                        name="description"
                        label="Task Description"
                    >
                        <div>
                            {isPreview ? (
                                <div
                                    dangerouslySetInnerHTML={{__html: form.getFieldValue('description')}}
                                    style={{height: '300px', overflowY: 'scroll'}}
                                />
                            ) : (
                                <div>
                                    <ReactQuill
                                        value={form.getFieldValue('description')} // 获取当前字段值
                                        onChange={value => form.setFieldValue("description", value)} // 更新字段值
                                        style={{height: '300px'}} // 设置编辑器的高度
                                    />
                                </div>
                            )}
                            <div style={{marginTop: '20px',float:"right"}}>
                                <Button type="primary" onClick={() => setIsPreview(!isPreview)}>
                                    {isPreview ? 'Edit' : 'Preview'}
                                </Button>
                            </div>
                        </div>
                    </Form.Item>
                </div>
                <div style={{display: "flex", marginTop: "50px"}}>
                    <div>
                        <Form.Item
                            style={{width: "100px"}}
                            name="urgency"
                            label="Urgency"
                            rules={[{required: true, message: 'Please select the urgency level'}]}
                        >
                            <Select>
                                <Option value="low">Low</Option>
                                <Option value="medium">Medium</Option>
                                <Option value="high">High</Option>
                            </Select>
                        </Form.Item>
                    </div>
                    <div style={{marginLeft: "20px"}}>
                        <Form.Item
                            name="price"
                            label="Task Price"
                            rules={[{required: true, message: 'Please enter the task price'}]}
                        >
                            <Input type="number" style={{height: '32px'}}/>
                        </Form.Item>
                    </div>
                </div>
                 <div style={{display:"flex"}}>
                     <div>
                         <Form.Item
                             style={{maxWidth: "300px"}}
                             name="area"
                             label="Task Area"
                         >
                             <SelectRegion selectChange={(value) => {
                                 // Handle select region change if needed
                             }}/>
                         </Form.Item>
                     </div>
                      <div style={{marginLeft:"10px"}}>
                          <Form.Item
                              style={{minWidth: "300px"}}
                              name="area"
                              label="Task tag"
                          >
                              <SelectRegion selectChange={(value) => {
                                  // Handle select region change if needed
                              }}/>
                          </Form.Item>
                      </div>
                 </div>
            </Form>
        </Modal>
    );
};

export default PublishTaskModal;